<template>
  <div class="revoked-container">
    <van-nav-bar
      title="注销账号"
      left-arrow
      @click-left="goBack"
      :style="{ backgroundColor: '#fff' }"
    />
    
    <!-- 警告图标 -->
    <div class="warning-section">
      <div class="warning-icon">
        <van-icon name="warning-o" />
      </div>
      <h2 class="warning-title">注意</h2>
      <p class="warning-text">注销账号后以下信息将被清空且无法找回</p>
    </div>

    <!-- 信息列表 -->
    <div class="info-list">
      <div class="info-item">
        <van-icon name="points" class="item-icon" />
        <span class="item-text">记账数据（账单、分账本）</span>
      </div>
      <div class="info-item">
        <van-icon name="manager-o" class="item-icon" />
        <span class="item-text">个人资料</span>
      </div>
      <div class="info-item">
        <van-icon name="vip-card-o" class="item-icon" />
        <span class="item-text">资产数据</span>
      </div>
      <div class="info-item">
        <van-icon name="gift-o" class="item-icon" />
        <span class="item-text">打卡天数</span>
      </div>
      <div class="info-item">
        <van-icon name="balance-o" class="item-icon" />
        <span class="item-text">钱包余额</span>
      </div>
      <div class="info-item">
        <van-icon name="notes-o" class="item-icon" />
        <span class="item-text">消息通知</span>
      </div>
      <div class="info-item">
        <van-icon name="records" class="item-icon" />
        <span class="item-text">交易记录</span>
      </div>
    </div>

    <!-- 协议勾选 -->
    <div class="agreement-section">
      <van-checkbox v-model="agreed" icon-size="18px">
        <template #default>
          <span class="agreement-text">
            我已阅读并同意
            <span class="agreement-link" @click.stop="showAgreement">《注销协议》</span>
          </span>
        </template>
      </van-checkbox>
    </div>

    <!-- 确认按钮 -->
    <div class="confirm-section">
      <van-button
        block
        round
        :disabled="!agreed"
        :class="{ 'active': agreed }"
        @click="handleConfirm"
        :loading="confirming"
      >
        确认
      </van-button>
    </div>

    <!-- 注销协议弹窗 -->
    <van-dialog 
      v-model:show="agreementVisible" 
      title="注销协议"
      :showConfirmButton="true"
      confirmButtonText="我知道了"
    >
      <div class="agreement-content">
        <h3>鲨鱼记账账号注销协议</h3>
        
        <h4>一、注销须知</h4>
        <p>1. 账号一旦注销，将无法恢复，请谨慎操作。</p>
        <p>2. 注销后，您的所有数据将被永久删除。</p>
        
        <h4>二、注销后将删除的信息</h4>
        <p>1. 所有记账数据，包括账单、分账本等</p>
        <p>2. 个人资料信息</p>
        <p>3. VIP权益、身份认证信息</p>
        <p>4. 积分、卡券等虚拟资产</p>
        <p>5. 钱包余额（请提前提现）</p>
        <p>6. 课程学习记录和权限</p>
        <p>7. 所有交易记录</p>
        
        <h4>三、注销流程</h4>
        <p>1. 阅读并同意本协议</p>
        <p>2. 点击确认注销</p>
        <p>3. 系统审核（3-7个工作日）</p>
        <p>4. 审核通过后完成注销</p>
        
        <h4>四、注意事项</h4>
        <p>1. 请确保账号内无未完成的交易</p>
        <p>2. 请确保钱包余额已提现</p>
        <p>3. 注销期间账号将被冻结</p>
        <p>4. 如有疑问，请联系客服</p>
        
        <p class="agreement-footer">最终解释权归鲨鱼记账所有</p>
      </div>
    </van-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showConfirmDialog } from 'vant'
import { getToken, removeToken } from '@/utils/token'
import { useUserStore } from '@/stores/user'
import { revokeAccount } from '@/api'


const router = useRouter()
const userStore = useUserStore()

// 是否同意协议
const agreed = ref(false)

// 协议弹窗显示
const agreementVisible = ref(false)

// 确认中状态
const confirming = ref(false)

// 显示协议
const showAgreement = () => {
  agreementVisible.value = true
}

// 返回上一页
const goBack = () => {
  router.back()
}

// 确认注销
const handleConfirm = async () => {
  if (!agreed.value) {
    showToast('请先阅读并同意注销协议')
    return
  }

  try {
    // 二次确认
    await showConfirmDialog({
      title: '确认注销',
      message: '确定要注销账号吗？此操作不可恢复！',
      confirmButtonText: '确定注销',
      cancelButtonText: '我再想想',
      confirmButtonColor: '#FF6B6B',
    })

    confirming.value = true

    // 调用后端注销接口
    const result = await revokeAccount()
    console.log('注销结果:', result)

    // 清除token和用户数据
    removeToken()
    if (userStore && userStore.logout) {
      userStore.logout()
    }

    showToast('账号注销成功')

    // 延迟跳转到登录页
    setTimeout(() => {
      router.replace({ name: 'login' })
    }, 1500)

  } catch (error) {
    // 用户取消注销或注销失败
    if (error.message) {
      console.error('注销失败:', error)
      showToast(error.message || '注销失败，请稍后重试')
    } else {
      console.log('用户取消注销')
    }
  } finally {
    confirming.value = false
  }
}
</script>

<style lang='scss' scoped>

.revoked-container {
  min-height: 100vh;
  padding-bottom: 80px;
  background-color: #ffffff;
  :deep(.van-nav-bar) {
    .van-nav-bar__title {
      color: #333;
      font-weight: bold;
    }
    
    // 返回箭头样式
    .van-nav-bar__arrow {
      color: #333;           /* 箭头颜色 */
      font-size: 18px;       /* 箭头大小 */
      font-weight: 600;      /* 箭头粗细 */
    }
  }
  // 警告区域
  .warning-section {
    padding: 40px 20px 30px;
    text-align: center;
    background-color: #fff;

    .warning-icon {
      margin: 0 auto 20px;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background-color: #FF6B6B;
      display: flex;
      align-items: center;
      justify-content: center;

      .van-icon {
        font-size: 48px;
        color: white;
      }
    }

    .warning-title {
      font-size: 24px;
      font-weight: bold;
      color: #333;
      margin: 0 0 15px 0;
    }

    .warning-text {
      font-size: 14px;
      color: #666;
      margin: 0;
      line-height: 1.6;
    }
  }

  // 信息列表
  .info-list {
    background-color: #fff;
    border-radius: 8px;
    padding: 15px 20px;

    .info-item {
      display: flex;
      align-items: center;
      padding: 12px 60px;
      color: #666;

      &:not(:last-child) {
        border-bottom: 1px solid #f5f5f5;
      }

      .item-icon {
        font-size: 18px;
        color: #999;
        margin-right: 12px;
      }

      .item-text {
        font-size: 15px;
        color: #666;
      }
    }
  }

  // 协议勾选区域
  .agreement-section {
    background-color: #fff;
    padding: 20px;
    display: flex;
    justify-content: center;

    :deep(.van-checkbox) {
      .van-checkbox__icon {
        border-color: #ddd;
      }

      .van-checkbox__icon--checked {
        background-color: #FFD847;
        border-color: #FFD847;
      }
    }

    .agreement-text {
      font-size: 14px;
      color: #666;
      margin-left: 8px;

      .agreement-link {
        color: #1989fa;
        text-decoration: underline;
      }
    }
  }

  // 确认按钮区域
  .confirm-section {
    left: 0;
    right: 0;
    padding: 15px 20px 30px;
    background-color: #fff;
   

    :deep(.van-button) {
      height: 50px;
      font-size: 16px;
      font-weight: 500;
      background-color: #e0e0e0;
      color: #999;
      border: none;
      transition: all 0.3s;

      &.active {
        background: linear-gradient(to right, #FFD847, #FFC107);
        color: #333;
      }

      &:active.active {
        opacity: 0.8;
      }
    }
  }

  // 协议内容弹窗
  :deep(.van-dialog) {
    max-height: 70vh;
    overflow-y: auto;
  }

  .agreement-content {
    padding: 20px;
    text-align: left;
    font-size: 14px;
    line-height: 1.8;
    color: #666;

    h3 {
      font-size: 18px;
      font-weight: bold;
      color: #333;
      margin: 0 0 20px 0;
      text-align: center;
    }

    h4 {
      font-size: 16px;
      font-weight: bold;
      color: #333;
      margin: 20px 0 10px 0;
    }

    p {
      margin: 8px 0;
      text-indent: 0;
    }

    .agreement-footer {
      margin-top: 20px;
      text-align: center;
      color: #999;
      font-size: 12px;
    }
  }
}
</style>